<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div class="gv-forms gv-forms-fluid" layout="column">
  <div class="gv-forms-header">
    <h1>Properties</h1>
    <span permission permission-only="'api-definition-u'">
      <ng-md-icon icon="settings" ng-click="apiPropertiesCtrl.open()"></ng-md-icon>
    </span>
  </div>
  <div class="gv-form">
      <h2></h2>
    <div class="gv-form-content" layout="column">
  <div layout="row" style="padding-left: 16px;" ng-if="dynamicPropertyEnabled">
    <span>
      Dynamic properties service is actually in <code>running</code>
      state and run each <code>{{apiPropertiesCtrl.dynamicPropertyService.trigger.rate}} {{apiPropertiesCtrl.dynamicPropertyService.trigger.unit}}</code>
      using <code>{{apiPropertiesCtrl.dynamicPropertyService.provider}}</code> provider.
    </span>
  </div>

  <form ng-if="apiPropertiesCtrl.hasPropertiesDefined()" name="formApiProperties" ng-submit="apiPropertiesCtrl.update(apiPropertiesCtrl.api)" novalidate>
    <md-table-container>
      <table md-table ng-init="order = 'name'">
        <thead md-head md-order="order">
          <tr md-row>
            <th md-column>
              <md-checkbox aria-label="Select all" ng-model="apiPropertiesCtrl.selectAll" ng-change="apiPropertiesCtrl.toggleSelectAll(apiPropertiesCtrl.selectAll)"></md-checkbox>
            </th>
            <th md-column md-order-by="name">Name</th>
            <th md-column>Value</th>
            <th md-column hide-gt-xs show-gt-sm>Dynamic</th>
            <th md-column width="80px" nowrap></th>
          </tr>
        </thead>
        <tbody md-body>
          <tr md-row ng-repeat="property in apiPropertiesCtrl.api.properties">
            <td md-cell><md-checkbox aria-label="Select {{property.key}}" ng-model="apiPropertiesCtrl.selectedProperties[property.key]" ng-change="apiPropertiesCtrl.checkSelectAll()"></md-checkbox></td>
            <td md-cell>{{property.key}}</td>
            <td permission permission-only="'api-definition-u'" md-cell ng-click="apiPropertiesCtrl.editValue($event, property)"
                ng-class="{'gravitee-placeholder': property.value}">
              {{property.value || 'Set value'}}
            </td>
            <td permission permission-except="'api-definition-u'">
              {{property.value}}
            </td>
            <td md-cell hide-gt-xs show-gt-sm>
              <ng-md-icon ng-show="property.dynamic" icon="check"></ng-md-icon>
            </td>
            <td md-cell>
              <ng-md-icon permission permission-only="'api-definition-d'" ng-show="!property.dynamic" ng-click="apiPropertiesCtrl.deleteProperty(property.key)" icon="delete"></ng-md-icon>
            </td>
          </tr>
        </tbody>
      </table>
    </md-table-container>
    <div class="md-actions gravitee-api-save-button" layout="row">
      <md-button class="md-raised md-warn float-right" type="button" ng-click="apiPropertiesCtrl.deleteSelectedProperties()"
                 permission permission-only="['api-definition-u']" ng-disabled="!apiPropertiesCtrl.hasSelectedProperties()">
        Delete
      </md-button>
    </div>
  </form>

  <gravitee-empty-state ng-if="!apiPropertiesCtrl.hasPropertiesDefined()"
                        icon="assignment"
                        model="Property"
                        message="Properties will appear here"
                        sub-message="Start creating a property"
                        create-mode="true"></gravitee-empty-state>

  <div ng-style="!apiPropertiesCtrl.hasPropertiesDefined() && {'text-align':'center'}">
    <md-button permission permission-only="'api-definition-u'" ng-class="{'md-fab-bottom-right': apiPropertiesCtrl.hasPropertiesDefined()}" class="md-fab" aria-label="Add" ng-click="apiPropertiesCtrl.showPropertyModal()">
      <ng-md-icon icon="add"></ng-md-icon>
    </md-button>
  </div>

  <div flex></div>
</md-content>

<md-sidenav class="md-sidenav-right md-whiteframe-z2 healthcheck" md-component-id="dynamic-properties-config">
  <md-toolbar>
    <div class="md-toolbar-tools">
      <h2 style="color: white;">
        <span>Dynamic properties settings</span>
      </h2>
      <span flex></span>
      <md-switch ng-model="dynamicPropertyEnabled" ng-disabled="formDynamicProperties.$invalid"
                 ng-change="apiPropertiesCtrl.switchEnabled()" class="md-block"
                 aria-label="Enable dynamic-property service"></md-switch>
    </div>
  </md-toolbar>

  <md-content layout-padding>
    <div style="margin-left: 7px; font-style: italic; border-left: 2px solid #b1bdc5;">
      <span>This service is requiring an API deployment.</span><br />
      <span>Do not forget to deploy API to start dynamic-properties service.</span>
    </div>

    <form name="formDynamicProperties" ng-submit="apiPropertiesCtrl.update()" novalidate>

      <h4>Polling frequency</h4>
      <div layout="row" layout-sm="column">
        <md-input-container class="md-block" flex-gt-xs>
          <label>Interval</label>
          <input required ng-model="apiPropertiesCtrl.dynamicPropertyService.trigger.rate" md-autofocus type="number" min="1" ng-required="true">
        </md-input-container>

        <div flex="5" hide-xs hide-sm>
          <!-- Spacer //-->
        </div>

        <md-input-container class="md-block" flex-gt-xs>
          <label>Time Unit</label>
          <md-select ng-model="apiPropertiesCtrl.dynamicPropertyService.trigger.unit" placeholder="Time unit" required ng-required="true">
            <md-option ng-repeat="timeUnit in apiPropertiesCtrl.timeUnits" ng-value="timeUnit">{{timeUnit}}</md-option>
          </md-select>
        </md-input-container>
      </div>

      <br>

      <h4>Provider</h4>
      <div layout="row" layout-sm="column">
        <md-input-container class="md-block" flex-gt-xs>
          <label>Type</label>
          <md-select ng-model="apiPropertiesCtrl.dynamicPropertyService.provider" placeholder="Type" required ng-required="true"
                     ng-change="apiPropertiesCtrl.onProviderTypeChange()">
            <md-option ng-repeat="provider in apiPropertiesCtrl.dynamicPropertyProviders" ng-value="provider.id">{{provider.name}}</md-option>
          </md-select>
        </md-input-container>
      </div>

      <br>

      <div ng-if="apiPropertiesCtrl.dynamicPropertyService.provider">
        <h4>
          Configuration

          <md-button ng-if="apiPropertiesCtrl.dynamicPropertyService.provider == 'HTTP'"
                     class="md-icon-button"
                     aria-label="Expected HTTP provider output"
                     ng-click="apiPropertiesCtrl.showExpectedProviderOutput()">
            <ng-md-icon class="no-top" icon="info" style="fill: #b1bdc5;"></ng-md-icon>
          </md-button>
        </h4>

          <div ng-if="apiPropertiesCtrl.dynamicPropertyService.provider == 'HTTP'" layout="column" layout-sm="column">
            <md-input-container class="md-block" flex-gt-sm>
              <label>HTTP Service URL</label>
              <input ng-model="apiPropertiesCtrl.dynamicPropertyService.configuration.url" type="url" ng-required="true">
            </md-input-container>

            <md-input-container class="md-block" flex-gt-sm>
              <label>
                Transformation (JOLT Specification)
              </label>

              <textarea
                        ui-codemirror="{ onLoad : apiPropertiesCtrl.codemirrorLoaded }"
                        ui-codemirror-opts="apiPropertiesCtrl.joltSpecificationOptions"
                        ng-model="apiPropertiesCtrl.dynamicPropertyService.configuration.specification"
                        ng-required="true" rows="5"></textarea>
            </md-input-container>
          </div>

        <br>
      </div>

      <md-divider></md-divider>

      <div class="md-actions gravitee-api-save-button" layout="row">
        <md-button class="md-accent" type="submit" ng-disabled="formDynamicProperties.$invalid || formDynamicProperties.$pristine">
          Save
        </md-button>
        <md-button class="md-warn" type="button" ng-click="healthCheckCtrl.reset()"
                   ng-disabled="formDynamicProperties.$invalid || formDynamicProperties.$pristine">
          Reset
        </md-button>
      </div>
    </form>
  </md-content>
</md-sidenav>
    </div>
  </div>
</div>
